<template>
  <div class="ueserver-container" v-loading="loading">
    <div class="ueserver">
      <div class="ueserver-header" :style="{ background: themeMixWhite }">
        <div class="ueserver-header-title">系统配置</div>
      </div>
      <fks-row class="ueserver-body">
        <fks-col :span="6">
          <p class="title">服务器系统</p>
          <p v-if="!loading">{{ sysInfomation.os.distro }}</p>
        </fks-col>
        <fks-col :span="6">
          <p class="title">处理器</p>
          <p v-if="!loading">{{ sysInfomation.cpu.name }}</p>
        </fks-col>
        <fks-col :span="6">
          <p class="title">显卡</p>
          <p v-if="!loading">{{ sysInfomation.gpu.name }}</p>
        </fks-col>
        <fks-col :span="3">
          <p class="title">显存</p>
          <p v-if="!loading">{{ memory(sysInfomation.gpu.memoryTotal) }}</p>
        </fks-col>
        <fks-col :span="3">
          <p class="title">内存</p>
          <p v-if="!loading">{{ memory(sysInfomation.memory.total) }}</p>
        </fks-col>
      </fks-row>
    </div>
    <div class="sysmonitor">
      <div class="monitor_item">
        <div class="monitor_item_title" :style="{ background: themeMixWhite }">
          内存监控
        </div>
        <dashboard
          v-if="!loading"
          id="chart1"
          class="dashboard"
          :value="memoryRatio"
        ></dashboard>
      </div>
      <div class="monitor_item">
        <div class="monitor_item_title" :style="{ background: themeMixWhite }">
          显存监控
        </div>
        <dashboard
          v-if="!loading"
          id="chart2"
          class="dashboard"
          :value="gpuRatio"
        ></dashboard>
      </div>
    </div>
  </div>
</template>

<script>
import { getSysInfo } from "../apis/ueserver";
import { THEME } from "@/store/Getter/getterTypes.js";
import { colorMix } from "@/utils/color";
import { formatBytes } from "../utils/index";
import dashboard from "./dashboard.vue";
export default {
  //import引入组件才能使用
  components: { dashboard },
  props: {},
  data() {
    return {
      sysInfomation: {},
      loading: false,
      memoryRatio: 0,
      gpuRatio: 0,
    };
  },
  // 计算属性
  computed: {
    themeMixWhite() {
      return colorMix(this.theme);
    },
    theme() {
      return this.$store.getters[THEME];
    },
    memory() {
      return (val) => {
        return formatBytes(val);
      };
    },
  },
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getData() {
      this.loading = true;
      const res = await getSysInfo();
      if (res.status) {
        this.sysInfomation = Object.assign({}, res.data);
        this.gpuRatio = Math.ceil(
          (this.sysInfomation.gpu.memoryUsed /
            this.sysInfomation.gpu.memoryTotal) *
            100
        );
        this.memoryRatio = Math.ceil(
          (this.sysInfomation.memory.used / this.sysInfomation.memory.total) *
            100
        );
        this.loading = false;
      }
    },
  },
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {
    this.getData();
  },
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期：创建之前
  beforeMount() {}, //生命周期：挂载之前
  beforeUpdate() {}, //生命周期：更新之前
  updated() {}, //生命周期：更新之后
  beforeDestroy() {}, //生命周期：销毁之前
  destroyed() {}, //生命周期：销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发执行
};
</script>
<style scoped lang="scss">
.ueserver-container {
  padding: 24px 32px;
  background: #f1f2f6;
}
.ueserver {
  flex-grow: 0;
  flex-shrink: 1;
  border: 1px solid #f7f7f7;
  margin-bottom: 32px;
  &-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 32px;
    &-title {
      line-height: 36px;
      color: #191919;
      font-size: 16px;
      font-weight: 600;
    }
  }
  &-body {
    padding: 24px 32px;
    font-size: 14px;
    color: #555555;
    line-height: 20px;
    background: #fff;
    font-weight: 400;
    word-wrap: break-word;
    p {
      margin: 0;
      padding: 0 10px;
    }
    .title {
      color: #191919;
      font-weight: bold;
      margin-bottom: 24px;
    }
  }
}
.sysmonitor {
  display: flex;
  align-items: center;
  gap: 20px;
}
.dashboard {
  width: 450px;
  height: 450px;
  margin: 0 40px;
}

.monitor_item {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 530px;
  .monitor_item_title {
    line-height: 36px;
    color: #191919;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: left;
    padding: 8px 32px;
  }
}
</style>
